<template>
    <div>
        <div class="content">
            <div class="strategyContent">
                <div style="margin-bottom: 10px">
                    <el-input placeholder="请输入车辆VIN号" v-model="carVinSearch" style="width: 300px;"
                        suffix-icon="el-icon-search" clearable>
                    </el-input>
                    <el-button type="primary" style="margin-left: 10px;" @click="getCarStrategyDetail">查询</el-button>
                </div>
                <div>
                    <h4 style="margin-top: 10px"> 策略配置：<span v-if="isEmptyObj(carCurrentStrategy)">无</span></h4>
                    <el-descriptions v-loading="currentStrategyLoading" class="current-strategy" :column='4'
                        v-if="!isEmptyObj(carCurrentStrategy)">
                        <!-- <el-descriptions-item label="配置ID">{{ carCurrentStrategy.id }}</el-descriptions-item> -->
                        <!-- <el-descriptions-item label="版本号">{{ carCurrentStrategy.version }}</el-descriptions-item> -->
                        <el-descriptions-item label="采集前秒数">
                            <span>前{{ carCurrentStrategy.collectTimeBefore }}/后{{ carCurrentStrategy.collectTimeAfter
                            }}</span>
                        </el-descriptions-item>
                        <!-- <el-descriptions-item label="采集后秒数">{{ carCurrentStrategy.collectTimeAfter }}
                        </el-descriptions-item> -->
                        <el-descriptions-item label="最大触发频次">
                            <span v-if="carCurrentStrategy.cycle == 'day'">{{ carCurrentStrategy.triggerCount }}次/天</span>
                            <span v-if="carCurrentStrategy.cycle == 'month'">{{ carCurrentStrategy.triggerCount }}次/月</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="上云自动压测">
                            <span v-if="carCurrentStrategy.dataPload == 0">否</span>
                            <span v-if="carCurrentStrategy.dataPload == 1">是</span></el-descriptions-item>
                        <el-descriptions-item label="触发性能监控的故障等级">{{ carCurrentStrategy.plogFaultLevel }}
                        </el-descriptions-item>
                        <el-descriptions-item label="性能监控">
                            <span v-if="carCurrentStrategy.plogLongtermMonitor == 0">关闭</span>
                            <span v-if="carCurrentStrategy.plogLongtermMonitor == 1">开启</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="全量日志上传">
                            <span v-if="carCurrentStrategy.uploadAllLog == 0">否</span>
                            <span v-if="carCurrentStrategy.uploadAllLog == 1">是</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="申请人">{{ carCurrentStrategy.applicant }}</el-descriptions-item>
                        <el-descriptions-item label="修改时间">{{ carCurrentStrategy.modifyTime }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <h4 style="margin-top: 10px">生效策略：</h4>
                <el-table v-loading="currentStrategyLoading" :data="carStrategyList" style="width: 100%;margin-top: 10px;">
                    <el-table-column prop="id" label="TriggerID" width="100"></el-table-column>
                    <el-table-column prop="strategy_name" label="策略名称"></el-table-column>
                    <el-table-column prop="strategy_desc" label="策略描述" min-width="300"></el-table-column>
                    <el-table-column prop="scene_id" label="场景ID" width="80"></el-table-column>
                    <el-table-column prop="priority" label="优先级" width="80">
                        <template #default="{ row }">
                            <span>{{ row.priority }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template #default="{ row }">
                            <span v-if="row.status == 0">暂停</span>
                            <span v-if="row.status == 1">启用</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_by" label="创建人" width="100"></el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
                    <el-table-column prop="modify_time" label="修改时间" width="200"></el-table-column>
                </el-table>
                <el-pagination :currentPage="carStrategyPageData.current" v-model:page-size="carStrategyPageData.size"
                    :total="carStrategyPageData.total" background layout="total, prev, pager, next"
                    style="padding: 20px;float: right" @current-change="carStrategyPageChange">
                </el-pagination>
            </div>
        </div>
        <!-- <RollBackPopupComponent ref="rollBackPopupComponent" @feedbackFn="feedbackFn" /> -->
        <HistoryConfigDetail ref="historyConfigDetail" />

    </div>
</template>

<script>
import TableComponent from '@/components/TableComponent.vue';
import { getLatestStrategyConfigByVinApi, getCurrentRelationStrategyPageByVinApi } from '@/api/carStrategy.js';
import { historicalConfigurationTableColumns } from '@/constant/config.js';
import { computed, onMounted, reactive, ref } from 'vue';
import RollBackPopupComponent from './components/RollBackPopupComponent.vue';
import HistoryConfigDetail from './components/HistoryConfigDetail.vue';
import { useStore } from 'vuex';
import { ElMessage } from "element-plus";
import { isEmpty} from "@/utils/util.js";

export default {
    components: {
        HistoryConfigDetail,
        RollBackPopupComponent,
        TableComponent,
    },
    setup() {
        const carStrategyPageData = reactive({
            total: 0,
            current: 1,
            size: 10,
        });
        const carVinSearch = ref(null);
        const currentStrategyLoading = ref(false);
        const isLoading = ref(false);
        const carStrategyList = ref([]);
        const carCurrentStrategy = ref({});
        const store = useStore();
        const btnPermission = computed(() => store.state.btnPermission);
        const getCarStrategyDetail = () => {
            if (isEmpty(carVinSearch.value)) {
                ElMessage({
                    message: '车辆VIN号为空',
                    type: 'warning',
                })
                return
            }
            carStrategyList.value = [];
            carCurrentStrategy.value = {};
            carStrategyPageData.current = 1
            currentStrategyLoading.value = true;
            getAllCarStrategyDetail();
        };
        const getAllCarStrategyDetail = (size = 10) => {

            getCurrentRelationStrategyPageByVinApi({
                size: carStrategyPageData.size,
                current: carStrategyPageData.current,
                vin: carVinSearch.value,
            }).then((res) => {
                currentStrategyLoading.value = false;
                if (res.data.code == 200) {
                    let response = res.data.data;
                    carStrategyList.value = response.records;
                    carStrategyPageData.total = response.total;
                    carStrategyPageData.current = response.current;
                    getCurrentCarStrategyDetail(carVinSearch.value)
                }
            });
        };
        const getCurrentCarStrategyDetail = (carVinSearch) => {
            getLatestStrategyConfigByVinApi({
                vin: carVinSearch,
            }).then((res) => {
                currentStrategyLoading.value = false;
                if (res.data.code == 200) {
                    let response = res.data.data;
                    currentStrategyLoading.value = false;
                    carCurrentStrategy.value = response;
                    // carStrategyList.value.forEach((item, index) => {
                    //     if (item.id == carCurrentStrategy.value.id) {
                    //         item.status = 1
                    //     }
                    // })
                }
            });
        };
        const handleSizeChange = (number) => {
            carStrategyPageData.size = number;
            getcarStrategyList(number)
        }
        const historyConfigDetail = ref(null);
        const viewDetailsFn = (rowData) => {
            historyConfigDetail.value.switchVisible(rowData);
        };
        const rollBackPopupComponent = ref(null);
        const rollBackFn = (row) => {
            rollBackPopupComponent.value.switchVisible(row);
        };


        onMounted(() => {
        });
        const feedbackFn = () => {
        };

        const carStrategyPageChange = (val) => {
            carStrategyPageData.current = val;
            getAllCarStrategyDetail(carStrategyPageData.size);
        };

        function isEmptyObj(obj) {
            return JSON.stringify(obj) === '{}'
        }
        return {
            historicalConfigurationTableColumns,
            carStrategyList,
            isLoading,
            viewDetailsFn,
            rollBackFn,
            rollBackPopupComponent,
            carStrategyPageChange,
            historyConfigDetail,
            feedbackFn,
            btnPermission,
            handleSizeChange,
            carVinSearch,
            carStrategyPageData,
            getCarStrategyDetail,
            getAllCarStrategyDetail,
            getCurrentCarStrategyDetail,
            carCurrentStrategy,
            isEmptyObj,
            currentStrategyLoading
        };
    },
};
</script>


<style lang="less" scoped>
.crumbs {}

.content {
    padding: 20px;

    .strategyContent {
        background: #ffffff;
        padding: 10px 20px;
    }

    .policyGroupContent {
        margin-top: 20px;
        background: #ffffff;
        padding: 10px 20px;
    }
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    margin-bottom: 10px;
}

.current-strategy {
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    // background-color: #F5F7FA;
    overflow: hidden;
    color: #303133;
    padding: 20px;
    margin-bottom: 10px;

    .el-descriptions__body {
        // background-color: #F5F7FA;
    }
}
</style>
